<template>
	<view class="register">
		<u-navbar  title=""  :border-bottom="false"  >
		</u-navbar>
		<view class="register__block">
			<view class="register__block__title">验证码登录</view>
			<view class="form">
			<u-field class="register__block__input" v-model="phone" placeholder="电话号码" :label-width="0" :clearable="false">
				<view class="register__block__input__countryCode"  slot="icon"  @click="getCountry()">
					<view>+{{$store.state.code}}</view>
					<view class="register__block__input__countryCode__border-right"></view>
				</view>
			</u-field>
			
			<u-field class="register__block__input" v-model="code" placeholder="验证码" :label-width="0" :clearable="false">
				<view v-bind:class="{register__block__input__button:this.canClick,register__block__input__button__disabled:!this.canClick}" slot="right" @click="getCode()">{{content}}</view>
			</u-field>
			<u-button class="register__block__button" type="primary" @click="login()">登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import  axios from "axios";
	import store from './store.js'
	export default {
		store:store,
		data() {
			return {
				passwordIcon:true,
				phone: '',
				password: '',
				confirmPassword:"",
				code:"",
				content:"获取验证码",
				totalTime:60,
				agree:true,
				canClick:true,
			}
		},
		onLoad() {
			
		},
		onLoad() {

		},
		mounted(){
		},
		methods: {
			goback(){
				this.$Router.back(1);
			},
			getCountry(){
				this.$router.push("/pages/login/chooseCountry");
			},
			getCode() {
				if (!this.canClick) return
				if(this.phone==''){
					uni.showToast({
						title: '手机号不能为空',
						icon:'none',
						duration: 2000
					});
					return
				}
				this.canClick = false
				let phoneCodeData={
					"phone":this.phone,
					"type":1
				}
				axios({
					method:"get",
					url:getApp().$store.state.baseURL+"/user/phonecode",
					params:phoneCodeData,
				}).then((response)=>{
					console.log("response",response)
					
					if(response.data.state=="SUCCESS"){
						uni.showToast({
							title: '验证码发送成功',
							icon:'none',
							duration: 2000
						});
						this.content = this.totalTime + 's后重新发送'
						let clock = window.setInterval(() => {
							this.totalTime--
							this.content = this.totalTime + 's后重新发送'
							if (this.totalTime < 0) {
							window.clearInterval(clock)
							this.content = '重新发送验证码'
							this.totalTime = 10
							this.canClick = true  
						 }
						},1000)
					}else{
						uni.showToast({
							title: '验证码发送失败',
							icon:'none',
							duration: 2000
						});
					}
				})
				
			},
			login() {
				let loginData={
					"phone":this.phone,
					"password":this.code,
					"loginType":2,
				}
				console.log("test",this.$store.state.baseURL)
				axios({
					method:"post",
					url:getApp().$store.state.baseURL+"/user/login",
					data:loginData,
				}).then((response)=>{
					console.log("response",response)
					if(response.data.state=="SUCCESS"){
						console.log("success")
						uni.setStorageSync("token",response.data.msg)
						console.log(uni.getStorageSync("token"))
						 // 测试
						 uni.switchTab({
						 	url:"/pages/core/index/index",
						 })
					}else{
						console.log(response.data)
						uni.showToast({
							title: response.data.msg,
							icon:'none',
							duration: 2000
						});
					}
				})	
			},
		
		}
	}
</script>
<style lang="scss" scoped>
	a {
		color: $uni-text-color-placeholder;
	}
</style>
<style lang="less" scoped>
	.register{
		display: flex;
		flex-direction: column;
		align-items: center;
		&__block {
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		&__title{
			align-self: flex-start;
			font-size: x-large;
			// font-weight: bold;
			margin: @uni-spacing-row-sm @uni-spacing-col-lg 0 @uni-spacing-col-lg ;
		}
		
		.form {
			}
			&__input {
				margin:@uni-spacing-row-sm @uni-spacing-col-lg  0  @uni-spacing-col-lg ;
				&__countryCode{
					margin-right: @uni-spacing-col-sm ;
					display: flex;
					align-items: center;
					&__border-right{
						margin-left: @uni-spacing-col-base;
						background-color: @uni-border-color;
						width: 1px;
						height: 10px;
					}
				}
				&__button{
					// background-color: #e2e2e2;
					font-size: small;
					color: @font-color-blue;
					&__disabled{
						color: @uni-text-color-grey;
						cursor: not-allowed;
					}
				}

			}
			&__button {
				margin-top: @uni-spacing-row-lg;
				margin-left: @uni-spacing-col-lg;
				margin-right: @uni-spacing-col-lg;
			}
		// }
	}
	}
</style>
